<template>
	<view class="content">
		<view class="titleBar">
			<view class="row">
				<view class="col-5" v-if="region_fix != 0">
					<view class="row" @click="$public.navTo('public/select_area?type=4')">
						<view class="col-6">
							<image src="../../static/public/csdw.png" mode="heightFix"></image>
						</view>
						<view class="col-18 t_size_28">
							{{location.text}}
						</view>
					</view>
				</view>
				<view class="col-14 off-1 set-1" v-if="region_fix != 0">
					<input type="text" v-model="serachs" :placeholder="placeholder" @focus="in_focus" @blur="in_focus" :focus="focus"/>
				</view>
				<view class="col-19 off-1 set-1" v-if="region_fix == 0">
					<input type="text" v-model="serachs" :placeholder="placeholder" @focus="in_focus" @blur="in_focus" :focus="focus"/>
				</view>
				<view class="col-3 t_center" @click="unfocus(focus)">
					{{focus==false?'搜索':'取消'}}
				</view>
			</view>
		</view>
		<view class="detail">
			<view class="row tb" v-if="location.type != 5 && location.type != 6">
				<view class="col-12" @click="quickBy(5)">
					<view class="row">
						<view class="col-6">
							<image src="../../static/public/jtb.png" mode="heightFix"></image>
						</view>
						<view class="col-18">
							<view class="name t_size_33 t_size_bold">
								<text v-if="userInfo.isSetUserAddressHome == 0">
									家
								</text>
								<text v-else>
									{{userInfo.userAddressHome.name}}
								</text>
							</view>
							<view class="address t_size_26">
								<text v-if="userInfo.isSetUserAddressHome == 0">
									设置家的位置
								</text>
								<text v-else>
									一键回家
								</text>
							</view>
						</view>
					</view>
				</view>
				<view class="col-12" @click="quickBy(5)">
					<view class="row">
						<view class="col-6">
							<image src="../../static/public/gstb.png" mode="heightFix"></image>
						</view>
						<view class="col-18">
							<view class="name t_size_33 t_size_bold">
								<text v-if="userInfo.isSetUserAddressCompany == 0">
									公司
								</text>
								<text v-else>
									{{userInfo.userAddressCompany.name}}
								</text>
							</view>
							<view class="address t_size_26">
								<text v-if="userInfo.isSetUserAddressCompany == 0">
									设置公司的位置
								</text>
								<text v-else>
									一键去公司
								</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="list">
				<view class="row total" v-for="(item,index) in location.list" :key="index" @click="localStroge(item)">
					<view class="col-2">
						<image src="../../static/public/dzdw.png" mode="heightFix"></image>
					</view>
					<view class="col-22">
						<view class="row">
							<view class="col-24 name t_size_30">
								{{item.title}}
							</view>
							<view class="col-24 address t_size_26">
								{{item.city}}{{item.district}}{{item.address}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const QQMapWX = require('../../common/js/qqmap-wx-jssdk.min.js');
	var qqmask;
	export default {
		data(){
			return {
				location: {
					text: '检索中.',
					code: '',
					latitude: '',
					longitude: '',
					list: [],
					type: 0
				},
				serachs: '',
				region_fix: 0,
				focus: false,
				placeholder: '您在哪上车',
				recommend: false,
				userInfo: {
					isSetUserAddressCompany: 0,
					isSetUserAddressHome : 0,
					userAddressCompany:{
						cityCode:"",
						name:'',
						getOnLat: 0,
						getOnLon: 0
					},
					userAddressHome:{
						cityCode: "",
						getOnLat: '',
						getOnLon: '',
						name: ""
					}
				}
			}
		},
		onLoad(option) {
			this.recommend = option.recommend || false;
			this.region_fix = option.region_fix || 0;
			this.location.type = option.type;
			this.placeholder = this.region_fix==0?'选择您的地址':'您在哪上车'
			qqmask = new QQMapWX({
				key: 'FFJBZ-32W6O-ZTPWU-S6G2B-AJB3Z-DKBV7'
			})
			uni.showLoading()
			if(option.type == 0 || option.type == 1){
				this.load(option);
			}else{
				this.location.text = option.text || '';
				this.search(option.text || '1')
			}
		},
		onShow() {
			this.userInfo = uni.getStorageSync('userInfo');
			let selectArea = uni.getStorageSync('selectArea');
			if(selectArea){
				this.location.text = selectArea.city;
				this.get_location_text(selectArea.location.lng,selectArea.location.lat);
				uni.removeStorageSync('selectArea');
			}
		},
		watch:{
			serachs(n,o){
				this.search(n)
			}
		},
		methods:{
			async load(option){
				this.location.type = option.type;
				if(this.recommend){
					this.location.latitude = JSON.parse(option.mapObject).c_latitude;
					this.location.longitude = JSON.parse(option.mapObject).c_longitude;
				}else{
					this.location.latitude = JSON.parse(option.mapObject).latitude;
					this.location.longitude = JSON.parse(option.mapObject).longitude;
				}
				let that = this;
				that.get_location_text(this.location.longitude,this.location.latitude)
				uni.hideLoading();
			},
			get_location_text(lo,la){
				let that = this;
				qqmask.reverseGeocoder({
					location: {
						latitude: la,
						longitude: lo
					},
					get_poi: 1,
					success:async (result) =>{
						that.location.text = result.result.address_component.city;
						that.search(result.result.address);
					} 
				})
			},
			search(keywords){
				let that = this;
				qqmask.getSuggestion({
					keyword: keywords,
					region: that.location.text,
					page_index: 1,
					page_size: 20,
					address_format: 'short',
					region_fix: that.region_fix,
					success: (res)=>{
						that.location.list = res.data;
						uni.hideLoading();
					},
					fail(fail){
						// console.log(fail);
						uni.hideLoading();
					}
				})
			},
			in_focus(e){
				if(e.type == 'focus'){
					this.focus = true;
				}else{
					this.focus = false; 
				}
			},
			unfocus(focus){
				if(focus == false){
					this.serachs = '';
				}
			},
			quickBy(e){
				let objPage = {
					location: {}
				};
				if(e == 5){
					if(this.userInfo.isSetUserAddressHome == 0){
						this.$public.navTo('public/select_by?type=' + e);
						return
					}else{
						objPage.title = this.userInfo.userAddressHome.name;
						objPage.adcode = this.userInfo.userAddressHome.cityCode;
						objPage.location.lat = this.userInfo.userAddressHome.getOnLat;
						objPage.location.lng =this.userInfo.userAddressHome.getOnLon;
					}
				}else{
					if(this.userInfo.isSetUserAddressCompany == 0){
						this.$public.navTo('public/select_by?type=' + e);
						return
					}else{
						objPage.title = this.userInfo.userAddressCompany.name;
						objPage.adcode = this.userInfo.userAddressCompany.cityCode;
						objPage.location.lat = this.userInfo.userAddressCompany.getOnLat;
						objPage.location.lng =this.userInfo.userAddressCompany.getOnLon;
					}
				}
				if(this.location.type == 0 || this.location.type == 2){
					this.location.type = 2;
				}else{
					this.location.type = 3;
				}
				this.localStroge(objPage);
			},
			async localStroge(item){
				let object = {
					title: item.title,
					latitude: item.location.lat,
					longitude: item.location.lng,
					adcode: item.adcode,
					cityCode: item.adcode.toString().substr(0,4) + '00'
				}
				if(this.location.type == 5 || this.location.type == 6){
					let objPage = {
						"cityCode": item.adcode.toString().substr(0,4) + '00',
						"getOnLat": item.location.lat,
						"getOnLon": item.location.lng,
						"isType": this.location.type == 5 ? 1 : 2,
						"name": item.title
					}
					let res = await this.$api.request(this.$api.public.userSet,objPage);
					if(res){
						let userInfo = uni.getStorageSync('userInfo');
						if(this.location.type == 5){
							userInfo.userAddressHome = res;
							userInfo.isSetUserAddressHome = 1;
						}else{
							userInfo.userAddressCompany = res;
							userInfo.isSetUserAddressCompany = 1;							
						}
						uni.setStorage({
							key:'userInfo',
							data:userInfo,
							success() {
								uni.navigateBack()
							}
						})
					}
				}else if(this.location.type == 0 || this.location.type == 2){
					let res = await this.$api.request(this.$api.public.getCityIsOpen, {
						cityCode: item.adcode.toString().substr(0,4) + '00'
					})
					if(res == 1){
						uni.setStorage({
							key:`location${this.location.type}`,
							data:object,
							success() {
								uni.navigateBack()
							}
						})
					}else{
						// console.log(res)
					}
				}else{
					uni.setStorage({
						key:`location${this.location.type}`,
						data:object,
						success() {
							uni.navigateBack()
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f5f5f5;
	}
	
	.titleBar{
		width: 92%;
		padding: 15rpx 4%;
		height: 60rpx;
		line-height: 60rpx;
		background-color: #FFFFFF;
		color: #333333;
		image{
			height: 30rpx;
			margin-top: 10rpx;
		}
		input{
			width: 80%;
			padding: 0 10%;
			height: 60rpx;
			line-height: 60rpx;
			background-color: #F5F5F5;
			border-radius: 30rpx;
		}
	}

	.detail{
		width: 100%;
		padding-top: 15rpx;
		margin-top: 21rpx;
		background-color: #FFFFFF;
		.tb{
			width: 92%;
			padding: 15rpx 4%;
			height: 90rpx;
			border-bottom: 1px solid #ededed;
			image{
				height: 70rpx;
				margin-top: 10rpx;
			}
			.name{
				overflow: hidden;
				font-size: 28rpx;
				height: 55rpx;
				line-height: 55rpx;
				color: #333333;
			}
			.address{
				height: 35rpx;
				line-height: 35rpx;
				color: #B3B3B3;
			}
		}
		.list{
			width: 92%;
			padding: 0 4%;
			.total{
				padding: 25rpx 0;
				height: 90rpx;
				border-bottom: 1px solid #EDEDED;
				image{
					height: 30rpx;
					margin-top: 30rpx;
				}
				.name{
					height: 55rpx;
					line-height: 55rpx;
					color: #333333;
					overflow: hidden;
				}
				.address{
					height: 35rpx;
					line-height: 35rpx;
					color: #B3B3B3;
					overflow: hidden;
				}
			}
		}
	}
</style>
